<template>
  <kk-relative class="Page W">
    <kk-text class="T1" val="Color 颜色" />
    <div class="F2" />
    <kk-text class="T2" val="预设颜色，需要通过 <kk-app> 组件注入" />
    <div class="F1" />
    <div class="ColorBox BoxRight" v-for="(item,index) in color" :key="index">
      <div
        class="In"
        :style="`background-color:rgb(${item.R});fill:${item.E>0?'rgb(48,49,51)':'rgb(255,255,255)'};`"
      >
        <kk-text class="Font FR" :val="`--${item.K}`" />
        <kk-text class="Font" :val="item.N" />
        <div class="F2" />
        <kk-text class="Font" :val="`rgb(${item.R})`" />
      </div>
      <div
        class="Ribbons W"
        :style="`background-image:linear-gradient(90deg,rgba(${item.R},0.8),rgba(${item.R},0.2))`"
      />
    </div>

    <div class="F1" />

    <kk-text class="T1" val="使用说明" />
    <div class="F2" />
    <kk-text class="T2" val="以下使用预设颜色的方法与 IE 浏览器不兼容" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Orange" val=".FontColor" />
        <kk-text class="Black Space" val="{" />
        <div class="F2" />
        <div class="SpaceBox" />
        <kk-text class="Blue" val="fill" />
        <kk-text class="Black" val=":" />
        <kk-text class="Blues Space" val="var" />
        <kk-text class="Black" val="(" />
        <kk-text class="Blue" val="--blueberry" />
        <kk-text class="Black" val=");" />
        <div class="F2" />
        <kk-text class="Black" val="}" />
      </div>
    </div>
  </kk-relative>
</template>

<script>
export default {
  // 页面对象
  data: () => ({
    color: [
      { E: 0, N: "蓝莓", K: "blueberry", R: "64,158,255" },
      { E: 0, N: "蘑菇", K: "mushroom", R: "144,147,153" },
      { E: 0, N: "樱桃", K: "cherry", R: "245,108,108" },
      { E: 0, N: "抹茶", K: "matcha", R: "103,194,58" },
      { E: 1, N: "香芋", K: "taro", R: "220,223,230" },
      { E: 0, N: "蛋黄", K: "yolk", R: "230,162,60" },
      { E: 0, N: "芝麻", K: "sesame", R: "48,49,51" }
    ]
  })
};
</script>

<style scoped>
.ColorBox {
  /* 颜色容器 */
  width: calc((100% - 4vw) / 4);
  display: inline-block;
  border-radius: 0.3vw;
  overflow: hidden;
}

.ColorBox .In {
  padding: 1.2vw;
}

.ColorBox .Font {
  fill: inherit;
  height: 0.7vw;
}

.BoxRight {
  /* 右间距 */
  margin: 0 0.5vw 1vw;
}

.Ribbons {
  /* 彩带 */
  height: 1vw;
}
</style>